<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#ad_right_bottom{
			width: 250px;
			height: 250px;
			position: absolute;
			right: 0;
			bottom: 0;
			background-color:red;
		}
		#close{
			position: absolute;
			left: 0;
			top: 0;
			color: #fff;
			background-color: #000;
			display: inline-block;
			padding: 5px 15px;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript">
	//为窗口添加滚动条事件其实非常的简单，
    //window.onscroll=function(){};
    //注意在获取滚动条距离的时候
    //谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；即
    //var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
    //这样才能兼容各个浏览器！
		window.onscroll=function(){
            var ad_right_bottom = document.getElementById('ad_right_bottom');
            var title = document.getElementById('title');
             var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
             // 可见区域高度 = >document.documentElement.clientHeight 
             //ad_right_bottom.style.top=document.documentElement.clientHeight - ad_right_bottom.offsetHeight+scrolltop+'px';


             startMove(document.documentElement.clientHeight - ad_right_bottom.offsetHeight+scrolltop);
             console.log("scrolltop = "+scrolltop+"可见区域高度:"+document.documentElement.clientHeight);
		};

        var timer=null;
        //iTarget	 目标位值
        function startMove(iTarget){
          var ad_right_bottom = document.getElementById('ad_right_bottom');
          clearInterval(timer);
          timer=setInterval(function(){
          	var speed = (iTarget - ad_right_bottom.offsetTop)/5;
          	speed=speed>0?Math.ceil(speed):Math.floor(speed);
                
                if (ad_right_bottom.offsetTop == iTarget) {
                     clearInterval(timer);
                }else{
                    ad_right_bottom.style.top=ad_right_bottom.offsetTop+speed+'px';
                }


          },30)

        };



        function close_ad(){
           //关闭窗口
           var ad_right_bottom = document.getElementById('ad_right_bottom');            
            ad_right_bottom.style.display='none';
        }

	</script>
</head>
<body style='height: 3000px;'>
	<div id="ad_right_bottom">
		<span id="close" onclick="close_ad()">关闭</span>
	</div>
</body>
</html>